<!--
 * @Author: gao_m3
 * @Date: 2022-08-16 10:50:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-08-16 14:15:01
 * @Descripttion: 
-->
.<template>
  <div class="main">
    <fm-nav-bar title="应用中心" left-arrow @click-left="$router.go(-1)" />
    <div class="block">
      <div class="title">示例应用</div>

      <fm-grid :column-num="4" class="grid" icon-size="52px" :border="false">
        <fm-grid-item
          v-for="(item, index) in quickAccessArea.slice(0, 4)"
          :key="index"
          :icon="item.src"
          :text="$t(item.title)"
          @click="goTo(item)"
        />
      </fm-grid>
    </div>
    <div class="block">
      <div class="title">功能插件</div>

      <fm-grid :column-num="4" class="grid" icon-size="52px" :border="false">
        <fm-grid-item
          v-for="(item, index) in plugins"
          :key="index"
          :icon="item.src"
          :text="$t(item.title)"
          @click="goTo(item)"
        />
      </fm-grid>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { ALL_APP_LIST, ALL_PLUGIN_LIST } from '@/common/constant'
import { SET_QUICK_ACCESS_AREA } from '@/store/Mutation/mutationTypes'
export default {
  name: 'AppCenter',
  computed: {
    ...mapGetters(['quickAccessArea']),
  },
  data() {
    return {
      plugins: ALL_PLUGIN_LIST.filter((app) => app.isFixed),
    }
  },
  methods: {
    goTo(data) {
      if (data.path !== '') {
        this.$router.push(data.path)
      } else if (data.title === '系统浏览器') {
        if (typeof yuanchu != 'undefined') {
          var ref = yuanchu?.inAppBrowser?.open(
            'https://fawkes.cybereng.com/#/',
            '_system',
            ''
          )
        }
      } else if (data.title === '视频监控') {
        if (typeof yuanchu != 'undefined') {
          var ref = yuanchu?.hikVideoPlayer?.preview({
            url: 'rtsp://183.134.221.24:554/openUrl/e2Xm7ja',
            playbackUrl: 'rtsp://183.134.221.24:554/openUrl/e2Xm7ja',
          })
        }
      } else if (data.title === '小程序') {
        if (typeof yuanchu != 'undefined') {
          const id = 'demo_yx'
          const name = 'MyDemo'
          const iconUrl =
            'https://yxweb.hdec.com:8081/mobile-test1/mini/icon.png'
          const url = 'https://fawkes.cybereng.com/#/'
          const data = {
            id,
            name,
            iconUrl,
            url,
          }
          yuanchu?.miniTask?.openMini(data, (err) => {
            Notify({ type: 'error', message: `小程序打开失败：${err}` })
          })
        }
      } else {
        Toast('开发中')
      }
    },
  },
  mounted() {
    // 初次进入默认菜单,若本地缓存存在应用列表
    if (this.$storage.get('quickAccessArea')) {
      this.$store.commit(
        SET_QUICK_ACCESS_AREA,
        JSON.parse(this.$storage.get('quickAccessArea'))
      )
    } else {
      // 若无，从全部应用中获取默认应用
      this.$store.commit(
        SET_QUICK_ACCESS_AREA,
        ALL_APP_LIST.filter((app) => app.isFixed)
      )
    }
  },
}
</script>
<style lang="less" scoped>
[class*='fm-hairline']::after {
  border: none;
}

.grid {
  // margin: 26px 0 12px 0;
  text-align: center;
}
/deep/.fm-grid-item__text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/deep/.fm-grid-item__icon + .fm-grid-item__text {
  margin-top: 0 !important;
}

/deep/.fm-grid-item__content {
  background: transparent;
  padding: 16px 0 !important;
}
/deep/.fm-grid-item__text {
  font-size: 24px;
  line-height: 34px;
  font-family: PingFangSC-Regular, PingFang SC;

  color: #555555;
}
/deep/.fm-grid {
  align-items: flex-start;
  padding: 0 6px;
}

/deep/.fm-grid {
  align-items: flex-start;
  padding: 0 6px;
}
.main {
  height: 100%;
  width: 100%;
  background: #f7f8fa;
}
.block {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  padding-top: 48px;
  margin: 24px 0;
  padding-bottom: 48px;

  .title {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 600;
    color: #15171a;
    padding: 0 0 12px 30px;
    line-height: 40px;
  }
}
</style>